<template>
  <div class="rooms-container">
    <div class="page-header">
      <h1>游戏房间</h1>
      <p>加入或创建一个房间，与其他玩家一起体验海龟汤游戏</p>
    </div>

    <div class="rooms-content">
      <!-- 创建房间面板 -->
      <div class="create-room-panel">
        <div class="panel-header">
          <h2>创建房间</h2>
          <button 
            class="btn-toggle" 
            @click="isCreatePanelOpen = !isCreatePanelOpen"
            :class="{ 'open': isCreatePanelOpen }"
          >
            <i class="fas fa-chevron-down"></i>
          </button>
        </div>
        
        <div v-if="isCreatePanelOpen" class="panel-body">
          <form @submit.prevent="handleCreateRoom">
            <div class="form-group">
              <label for="roomName">房间名称</label>
              <input
                type="text"
                id="roomName"
                v-model="createRoomForm.name"
                placeholder="输入房间名称"
                required
              />
            </div>
            
            <div class="form-group">
              <label for="maxPlayers">最大玩家数</label>
              <select id="maxPlayers" v-model="createRoomForm.maxPlayers">
                <option value="2">2人</option>
                <option value="4">4人</option>
                <option value="6">6人</option>
                <option value="8">8人</option>
              </select>
            </div>
            
            <div class="form-group">
              <label for="roomPassword">房间密码（可选）</label>
              <input
                type="password"
                id="roomPassword"
                v-model="createRoomForm.password"
                placeholder="设置房间密码"
              />
            </div>
            
            <div class="form-group">
              <label for="roomSoup">选择海龟汤题目</label>
              <select id="roomSoup" v-model="createRoomForm.soupId">
                <option value="">随机题目</option>
                <option v-for="soup in availableSoups" :key="soup.id" :value="soup.id">
                  {{ soup.title }} ({{ getDifficultyText(soup.difficulty) }})
                </option>
              </select>
            </div>
            
            <div class="form-group">
              <label for="roomSettings">房间设置</label>
              <div class="checkbox-group">
                <label>
                  <input type="checkbox" v-model="createRoomForm.public" />
                  公开房间（所有人可见）
                </label>
                <label>
                  <input type="checkbox" v-model="createRoomForm.allowHints" />
                  允许使用提示
                </label>
                <label>
                  <input type="checkbox" v-model="createRoomForm.timeLimit" />
                  设置时间限制
                </label>
              </div>
            </div>
            
            <button type="submit" class="btn-primary" :disabled="isCreatingRoom">
              <span v-if="isCreatingRoom">创建中...</span>
              <span v-else>创建房间</span>
            </button>
          </form>
        </div>
      </div>

      <!-- 房间筛选和搜索 -->
      <div class="room-filters">
        <div class="search-container">
          <input
            type="text"
            v-model="searchQuery"
            placeholder="搜索房间名称..."
            class="search-input"
          />
        </div>
        
        <div class="filter-buttons">
          <button 
            class="filter-btn" 
            :class="{ active: filterStatus === 'all' }"
            @click="filterStatus = 'all'"
          >
            全部
          </button>
          <button 
            class="filter-btn" 
            :class="{ active: filterStatus === 'waiting' }"
            @click="filterStatus = 'waiting'"
          >
            等待中
          </button>
          <button 
            class="filter-btn" 
            :class="{ active: filterStatus === 'playing' }"
            @click="filterStatus = 'playing'"
          >
            游戏中
          </button>
          <button 
            class="filter-btn" 
            :class="{ active: filterStatus === 'password' }"
            @click="filterStatus = 'password'"
          >
            密码房
          </button>
        </div>
      </div>

      <!-- 房间列表 -->
      <div class="room-list">
        <div class="room-list-header">
          <div class="header-item name">房间名称</div>
          <div class="header-item players">玩家</div>
          <div class="header-item status">状态</div>
          <div class="header-item soup">当前题目</div>
          <div class="header-item action">操作</div>
        </div>
        
        <div class="room-items">
          <div 
            v-for="room in filteredRooms" 
            :key="room.id"
            class="room-item"
            :class="{ 'has-password': room.password }"
          >
            <div class="room-info name">
              <div class="room-name">{{ room.name }}</div>
              <div class="room-owner">房主: {{ room.owner.nickname || room.owner.username }}</div>
            </div>
            
            <div class="room-info players">
              <div class="player-count">{{ room.players.length }}/{{ room.maxPlayers }}</div>
              <div class="player-avatars">
                <img 
                  v-for="player in room.players.slice(0, 4)" 
                  :key="player.id"
                  :src="player.avatar || 'https://via.placeholder.com/30'" 
                  alt="Player"
                  class="player-avatar"
                  :title="player.nickname || player.username"
                />
                <span v-if="room.players.length > 4" class="player-more">+{{ room.players.length - 4 }}</span>
              </div>
            </div>
            
            <div class="room-info status">
              <span class="status-badge" :class="room.status">
                {{ getStatusText(room.status) }}
              </span>
            </div>
            
            <div class="room-info soup">
              <div v-if="room.currentSoup" class="soup-title">{{ room.currentSoup.title }}</div>
              <div v-else class="soup-title">未选择</div>
              <div v-if="room.currentSoup" class="soup-difficulty">
                {{ getDifficultyText(room.currentSoup.difficulty) }}
              </div>
            </div>
            
            <div class="room-info action">
              <button 
                class="btn-primary" 
                @click="joinRoom(room)"
                :disabled="room.status === 'closed' || isJoiningRoom"
              >
                <span v-if="room.status === 'closed'">已关闭</span>
                <span v-else-if="isJoiningRoom">加入中...</span>
                <span v-else-if="room.password">输入密码</span>
                <span v-else>加入房间</span>
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 空房间提示 -->
      <div v-if="filteredRooms.length === 0" class="empty-rooms">
        <div class="empty-content">
          <i class="fas fa-door-open"></i>
          <h3>暂无房间</h3>
          <p>没有找到符合条件的房间，请尝试其他筛选条件或创建一个新房间</p>
        </div>
      </div>
    </div>

    <!-- 密码输入弹窗 -->
    <div v-if="showPasswordModal" class="modal-overlay" @click.self="closePasswordModal">
      <div class="modal-content">
        <h3>输入房间密码</h3>
        <p>房间 "{{ passwordRoom?.name }}" 需要密码才能加入</p>
        <form @submit.prevent="submitPassword">
          <div class="form-group">
            <input
              type="password"
              v-model="roomPassword"
              placeholder="请输入房间密码"
              required
              @keyup.enter="submitPassword"
            />
          </div>
          <div v-if="passwordError" class="error-message">{{ passwordError }}</div>
          <div class="modal-actions">
            <button type="submit" class="btn-primary" :disabled="isJoiningRoom">
              <span v-if="isJoiningRoom">验证中...</span>
              <span v-else>加入</span>
            </button>
            <button type="button" class="btn-outline" @click="closePasswordModal">取消</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import contentService from '../services/contentService';
import gameService from '../services/gameService';
import type { GameRoom, Soup, CreateRoomRequest } from '../types';

const router = useRouter();

// 状态管理
const isCreatePanelOpen = ref(false);
const searchQuery = ref('');
const filterStatus = ref('all');
const filterDifficulty = ref('all');
const isCreatingRoom = ref(false);
const isJoiningRoom = ref(false);
const showPasswordModal = ref(false);
const roomPassword = ref('');
const passwordError = ref('');
const passwordRoom = ref<GameRoom | null>(null);
const loading = ref(false);
const error = ref('');

// 房间列表数据（模拟）
const rooms = ref<GameRoom[]>([
  {
    id: '1',
    name: '推理大师',
    owner: {
      id: '100',
      username: 'master',
      nickname: '推理大师',
      avatar: 'https://via.placeholder.com/40'
    },
    players: [
      { id: '100', username: 'master', nickname: '推理大师', avatar: 'https://via.placeholder.com/40' },
      { id: '101', username: 'detective', nickname: '侦探', avatar: 'https://via.placeholder.com/40' },
      { id: '102', username: 'solver', nickname: '解谜者', avatar: 'https://via.placeholder.com/40' }
    ],
    maxPlayers: 6,
    status: 'waiting',
    password: '',
    currentSoup: {
      id: 'soup1',
      title: '神秘的敲门声',
      difficulty: 'medium',
      content: '一个人独自在家，突然听到敲门声...',
      answer: '敲门的是送快递的...'
    },
    createdAt: new Date('2024-01-16T19:30:00')
  },
  {
    id: '2',
    name: '海龟汤爱好者',
    owner: {
      id: '200',
      username: 'lover',
      nickname: '汤面爱好者',
      avatar: 'https://via.placeholder.com/40'
    },
    players: [
      { id: '200', username: 'lover', nickname: '汤面爱好者', avatar: 'https://via.placeholder.com/40' },
      { id: '201', username: 'newbie', nickname: '新手', avatar: 'https://via.placeholder.com/40' }
    ],
    maxPlayers: 4,
    status: 'waiting',
    password: '1234',
    currentSoup: {
      id: 'soup2',
      title: '消失的钥匙',
      difficulty: 'easy',
      content: '小明发现自己的钥匙不见了...',
      answer: '钥匙在他的口袋里...'
    },
    createdAt: new Date('2024-01-16T20:00:00')
  },
  {
    id: '3',
    name: '恐怖主题房',
    owner: {
      id: '300',
      username: 'scary',
      nickname: '恐怖达人',
      avatar: 'https://via.placeholder.com/40'
    },
    players: [
      { id: '300', username: 'scary', nickname: '恐怖达人', avatar: 'https://via.placeholder.com/40' },
      { id: '301', username: 'brave', nickname: '勇敢者', avatar: 'https://via.placeholder.com/40' },
      { id: '302', username: 'thriller', nickname: '惊悚迷', avatar: 'https://via.placeholder.com/40' },
      { id: '303', username: 'horror', nickname: '恐怖片爱好者', avatar: 'https://via.placeholder.com/40' }
    ],
    maxPlayers: 8,
    status: 'playing',
    password: '',
    currentSoup: {
      id: '1',
      title: '雨夜的哭声',
      difficulty: 'medium'
    },
    createdAt: new Date('2024-01-16T19:45:00')
  },
  {
    id: '4',
    name: '新手训练营',
    owner: {
      id: '400',
      username: 'trainer',
      nickname: '导师',
      avatar: 'https://via.placeholder.com/40'
    },
    players: [
      { id: '400', username: 'trainer', nickname: '导师', avatar: 'https://via.placeholder.com/40' },
      { id: '401', username: 'beginner', nickname: '初学者', avatar: 'https://via.placeholder.com/40' }
    ],
    maxPlayers: 6,
    status: 'waiting',
    password: '',
    currentSoup: null,
    createdAt: new Date('2024-01-16T20:15:00')
  }
]);

// 可用的海龟汤题目（模拟）
const availableSoups = ref<Soup[]>([
  {
    id: 'soup1',
    title: '神秘的敲门声',
    difficulty: 'medium',
    content: '一个人独自在家，突然听到敲门声...',
    answer: '敲门的是送快递的...'
  },
  {
    id: 'soup2',
    title: '消失的钥匙',
    difficulty: 'easy',
    content: '小明发现自己的钥匙不见了...',
    answer: '钥匙在他的口袋里...'
  },
  {
    id: 'soup3',
    title: '午夜电话',
    difficulty: 'hard',
    content: '深夜，电话突然响起...',
    answer: '是定时闹钟响了...'
  },
  {
    id: 'soup4',
    title: '密室逃脱',
    difficulty: 'medium',
    content: '张三醒来发现自己在一个陌生的房间里...',
    answer: '这是他参加的密室逃脱游戏...'
  },
  {
    id: 'soup5',
    title: '诡异的镜子',
    difficulty: 'hard',
    content: '小李总感觉镜子里的自己有些不对劲...',
    answer: '镜子是双面镜，对面有人在看...'
  }
]);

// 创建房间表单数据
const createRoomForm = ref<CreateRoomRequest>({
  name: '',
  maxPlayers: 4,
  password: '',
  soupId: '',
  public: true,
  allowHints: true,
  timeLimit: false
});

// 获取房间列表
const fetchRooms = async () => {
  loading.value = true;
  error.value = '';
  
  try {
    // 模拟API调用，实际项目中使用gameService.getGameRooms()
    // rooms.value = await gameService.getGameRooms();
    // 这里使用已有的模拟数据
  } catch (err: any) {
    error.value = err.message || '获取房间列表失败';
  } finally {
    loading.value = false;
  }
};

// 过滤后的房间列表
const filteredRooms = computed(() => {
  return rooms.value.filter(room => {
    // 搜索过滤
    const matchesSearch = room.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
                          (room.currentSoup && room.currentSoup.title.toLowerCase().includes(searchQuery.value.toLowerCase())) ||
                          room.owner.nickname?.toLowerCase().includes(searchQuery.value.toLowerCase());
    
    // 状态过滤
    let matchesStatus = true;
    if (filterStatus.value === 'waiting') {
      matchesStatus = room.status === 'waiting';
    } else if (filterStatus.value === 'playing') {
      matchesStatus = room.status === 'playing';
    } else if (filterStatus.value === 'password') {
      matchesStatus = !!room.password;
    }
    
    // 难度过滤
    const matchesDifficulty = filterDifficulty.value === 'all' || 
                             (!room.currentSoup) ||
                             room.currentSoup.difficulty === filterDifficulty.value;
    
    return matchesSearch && matchesStatus && matchesDifficulty;
  }).sort((a, b) => {
    // 按创建时间倒序排列
    return b.createdAt.getTime() - a.createdAt.getTime();
  });
});

// 获取状态文本
const getStatusText = (status: string): string => {
  switch (status) {
    case 'waiting':
      return '等待中';
    case 'playing':
      return '游戏中';
    case 'closed':
      return '已关闭';
    default:
      return '未知';
  }
};

// 获取难度文本
const getDifficultyText = (difficulty?: string): string => {
  switch (difficulty) {
    case 'easy':
      return '简单';
    case 'medium':
      return '中等';
    case 'hard':
      return '困难';
    default:
      return '未知';
  }
};

// 加载房间列表
const loadRooms = async () => {
  try {
    // 模拟API调用加载房间列表
    // 实际项目中应该调用roomService.getRooms()
    console.log('Loading rooms...');
  } catch (error) {
    console.error('Failed to load rooms:', error);
  }
};

// 加载可用的海龟汤题目
const loadAvailableSoups = async () => {
  try {
    // 模拟API调用加载可用的海龟汤题目
    // 实际项目中应该调用contentService.getPopularSoups()
    console.log('Loading available soups...');
  } catch (error) {
    console.error('Failed to load available soups:', error);
  }
};

// 创建房间
const handleCreateRoom = async () => {
  // 表单验证
  if (!createRoomForm.value.name.trim()) {
    alert('请输入房间名称');
    return;
  }
  
  isCreatingRoom.value = true;
  try {
    // 模拟创建房间
    const newRoom: GameRoom = {
      id: `room_${Date.now()}`,
      name: createRoomForm.value.name,
      owner: {
        id: 'current_user',
        username: 'current_user',
        nickname: '当前用户',
        avatar: 'https://via.placeholder.com/40'
      },
      players: [
        {
          id: 'current_user',
          username: 'current_user',
          nickname: '当前用户',
          avatar: 'https://via.placeholder.com/40'
        }
      ],
      maxPlayers: createRoomForm.value.maxPlayers,
      status: 'waiting',
      password: createRoomForm.value.password,
      currentSoup: createRoomForm.value.soupId ? 
        availableSoups.value.find(s => s.id === createRoomForm.value.soupId) || null : null,
      createdAt: new Date()
    };
    
    // 实际项目中调用API
    // await gameService.createGameRoom(createRoomForm.value);
    
    rooms.value.unshift(newRoom);
    
    // 重置表单
    createRoomForm.value = {
      name: '',
      maxPlayers: 4,
      password: '',
      soupId: '',
      public: true,
      allowHints: true,
      timeLimit: false
    };
    
    // 收起创建面板
    isCreatePanelOpen.value = false;
    
    // 跳转到房间页面
    router.push(`/rooms/${newRoom.id}`);
  } catch (err: any) {
    console.error('创建房间失败:', err);
    alert('创建房间失败: ' + (err.message || '未知错误'));
  } finally {
    isCreatingRoom.value = false;
  }
};

// 加入房间
const joinRoom = (room: GameRoom) => {
  if (room.status === 'closed') {
    alert('房间已关闭');
    return;
  }
  
  if (room.players.length >= room.maxPlayers) {
    alert('房间已满');
    return;
  }
  
  if (room.password) {
    showPasswordModal.value = true;
    passwordRoom.value = room;
    roomPassword.value = '';
    passwordError.value = '';
  } else {
    // 直接加入无密码房间
    joinRoomWithoutPassword(room);
  }
};

// 无密码加入房间
const joinRoomWithoutPassword = async (room: GameRoom) => {
  isJoiningRoom.value = true;
  
  try {
    // 实际项目中调用API
    // await gameService.joinGameRoom(room.id);
    
    // 模拟加入成功
    await new Promise(resolve => setTimeout(resolve, 500));
    router.push(`/rooms/${room.id}`);
  } catch (err: any) {
    console.error('加入房间失败:', err);
    alert('加入房间失败: ' + (err.message || '未知错误'));
  } finally {
    isJoiningRoom.value = false;
  }
};

// 提交密码并加入房间
const submitPassword = async () => {
  if (!passwordRoom.value) return;
  
  isJoiningRoom.value = true;
  passwordError.value = '';
  
  try {
    // 模拟密码验证
    if (roomPassword.value === passwordRoom.value.password) {
      showPasswordModal.value = false;
      // 加入房间
      joinRoomWithoutPassword(passwordRoom.value);
    } else {
      passwordError.value = '密码错误，请重试';
    }
  } catch (err: any) {
    passwordError.value = '加入房间失败，请稍后重试';
  } finally {
    isJoiningRoom.value = false;
  }
};

// 关闭密码输入弹窗
const closePasswordModal = () => {
  showPasswordModal.value = false;
  passwordRoom.value = null;
  roomPassword.value = '';
  passwordError.value = '';
};

// 格式化时间
const formatTime = (date: Date): string => {
  return date.toLocaleTimeString('zh-CN', {
    hour: '2-digit',
    minute: '2-digit'
  });
};

// 生命周期
onMounted(() => {
  fetchRooms();
});
</script>

<style scoped>
.rooms-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.page-header {
  text-align: center;
  margin-bottom: 2rem;
}

.page-header h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  color: #333;
}

.page-header p {
  color: #666;
  font-size: 1.1rem;
}

.rooms-content {
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

/* 创建房间面板 */
.create-room-panel {
  border-bottom: 1px solid #e0e0e0;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  cursor: pointer;
  background-color: #f8f9fa;
}

.panel-header h2 {
  margin: 0;
  font-size: 1.25rem;
  color: #333;
}

.btn-toggle {
  background: none;
  border: none;
  cursor: pointer;
  color: #666;
  font-size: 0.875rem;
  transition: transform 0.2s ease;
}

.btn-toggle.open {
  transform: rotate(180deg);
}

.panel-body {
  padding: 1.5rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: #333;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 0.25rem;
  font-size: 1rem;
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: #165DFF;
}

.checkbox-group {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.checkbox-group label {
  display: flex;
  align-items: center;
  font-weight: 400;
  cursor: pointer;
}

.checkbox-group input[type="checkbox"] {
  width: auto;
  margin-right: 0.5rem;
}

/* 房间筛选和搜索 */
.room-filters {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  border-bottom: 1px solid #e0e0e0;
  flex-wrap: wrap;
  gap: 1rem;
}

.search-container {
  flex: 1;
  min-width: 250px;
}

.search-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #ddd;
  border-radius: 2rem;
  font-size: 0.875rem;
}

.search-input:focus {
  outline: none;
  border-color: #165DFF;
}

.filter-buttons {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.filter-btn {
  padding: 0.5rem 1rem;
  border: 1px solid #ddd;
  background-color: white;
  border-radius: 0.25rem;
  cursor: pointer;
  font-size: 0.875rem;
  color: #666;
  transition: all 0.2s ease;
}

.filter-btn:hover {
  border-color: #165DFF;
  color: #165DFF;
}

.filter-btn.active {
  background-color: #165DFF;
  color: white;
  border-color: #165DFF;
}

/* 房间列表 */
.room-list {
  overflow-x: auto;
}

.room-list-header {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 2fr 1fr;
  gap: 1rem;
  padding: 1rem 1.5rem;
  background-color: #f8f9fa;
  font-weight: 500;
  color: #666;
  font-size: 0.875rem;
  border-bottom: 1px solid #e0e0e0;
  min-width: 768px;
}

.room-item {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 2fr 1fr;
  gap: 1rem;
  padding: 1.5rem;
  border-bottom: 1px solid #f0f0f0;
  min-width: 768px;
  position: relative;
}

.room-item:hover {
  background-color: #f8f9fa;
}

.room-item.has-password::before {
  content: '🔒';
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 1rem;
}

.room-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.room-name {
  font-weight: 500;
  color: #333;
  margin-bottom: 0.25rem;
}

.room-owner {
  font-size: 0.875rem;
  color: #666;
}

.player-count {
  font-weight: 500;
  color: #333;
  margin-bottom: 0.5rem;
  text-align: center;
}

.player-avatars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  position: relative;
}

.player-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid white;
}

.player-more {
  position: absolute;
  right: 0;
  background-color: #165DFF;
  color: white;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid white;
}

.status-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.75rem;
  font-weight: 500;
  align-self: center;
}

.status-badge.waiting {
  background-color: #e6f7ff;
  color: #1890ff;
}

.status-badge.playing {
  background-color: #f6ffed;
  color: #52c41a;
}

.status-badge.closed {
  background-color: #fff1f0;
  color: #ff4d4f;
}

.soup-title {
  font-weight: 500;
  color: #333;
  margin-bottom: 0.25rem;
}

.soup-difficulty {
  font-size: 0.875rem;
  color: #666;
}

/* 空房间提示 */
.empty-rooms {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  min-height: 400px;
}

.empty-content {
  text-align: center;
  color: #999;
}

.empty-content i {
  font-size: 4rem;
  margin-bottom: 1rem;
}

.empty-content h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1.25rem;
  color: #666;
}

/* 弹窗样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background-color: white;
  border-radius: 0.5rem;
  padding: 2rem;
  max-width: 400px;
  width: 90%;
}

.modal-content h3 {
  margin-top: 0;
  margin-bottom: 1rem;
  color: #333;
}

.modal-content p {
  color: #666;
  margin-bottom: 1.5rem;
}

.error-message {
  color: #ff4d4f;
  font-size: 0.875rem;
  margin-bottom: 1rem;
}

.modal-actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  margin-top: 1.5rem;
}

/* 按钮样式 */
.btn-primary {
  padding: 0.75rem 1.5rem;
  background-color: #165DFF;
  color: white;
  border: none;
  border-radius: 0.25rem;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.btn-primary:hover:not(:disabled) {
  background-color: #0e46c2;
}

.btn-primary:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.btn-outline {
  padding: 0.75rem 1.5rem;
  background-color: transparent;
  color: #165DFF;
  border: 1px solid #165DFF;
  border-radius: 0.25rem;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-outline:hover:not(:disabled) {
  background-color: #165DFF;
  color: white;
}

.btn-outline:disabled {
  border-color: #ccc;
  color: #ccc;
  cursor: not-allowed;
}

/* 响应式样式 */
@media (max-width: 992px) {
  .room-filters {
    flex-direction: column;
    align-items: stretch;
  }
  
  .search-container {
    min-width: auto;
  }
}

@media (max-width: 768px) {
  .rooms-container {
    padding: 1rem;
  }
  
  .page-header h1 {
    font-size: 2rem;
  }
  
  .panel-header,
  .panel-body,
  .room-filters {
    padding: 1rem;
  }
  
  .room-item,
  .room-list-header {
    padding: 1rem;
    gap: 0.5rem;
  }
  
  .checkbox-group {
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .modal-actions {
    flex-direction: column;
  }
  
  .modal-actions button {
    width: 100%;
  }
}
</style>